<template>
  <div>
    <top webTitle="市场"></top>
    <navC class="navC"></navC>
    <div class="container-fluid">
      <div class="row text-center">
        <div class="col">名称/代码</div>
        <div class="col">最新价</div>
        <div class="col">涨跌幅</div>
      </div>
      <div class="row my-3 text-center">
        <div class="col">
          <div class="row " v-for="v in data">
            
            <div class="col-12">
              <div class="row" @click="to(v.id,v.name)">
                
                
                <div class="col">
                  <div class="col-12">
                    {{v.name}}
                  </div>
                  <div class="col-12 mt-1">{{v.id}}</div>
                </div>
                
                <div class="col">
                  {{v.last_trading_price}}
                </div>
                
                <div class="col">
                  {{v.diff_rate}}
                </div>
                
                
                <div class="col-12 mx-0 px-0">
                  <hr style="background-color: rgba(245,245,245,0.18)"/>
                </div>
              
              
              </div>
            </div>
          </div>
        
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  
  
  import navC from "@/components/public/mobile/nav";
  import top from "@/components/public/mobile/top";
  
  export default {
    data() {
      return {
        page: 1,
        pageSize: 20,
        data: [],
        tradeId: [], //交易品id
      }
    },
    computed: {
      //将状态数字转换为对应的文字解释
      countTotal() {
        // console.log(this.data.length);
        //
        // for (let i=0;i<this.data.length;i++) {
        //   this.data[i].last_trading_price = 123;
        // }
        //   Vue.set(this.tableDataList,i,this.tableDataList[i])
        // }
      }
    },
    components: {
      navC, top,
    },
    methods: {
      to(id,name){
        this.$router.push({path:'/quotation',query:{tradeId:id,tradeName:name}});
      },
      list() {
        let $this = this;
        let map = {
          available: '1',
          delete_time: '1',
        };
        fPost('api/trade/getList', {map}, function (res) {
          if (res.code !== 0) {
            $this.data = [];
            layer.msg(res.msg);
            return;
          }
          res.data.result.forEach((item, index) => {
            $this.tradeId.push(item.id);
          });
          
          $this.data = res.data.result;
          $this.socket();
        });
      },
      
      socket() {
        //建立websocket连接
        this.ws = new WebSocket(ws);
        
        let tradeId = this.tradeId.join(',');
        
        this.ws.onopen = function (evt) {
          dump("行情数据通道已建立");
          let msg = {
            group: tradeId,
            type: 'data'
          };
          this.send(JSON.stringify(msg));
        };
        this.ws.onmessage = this.wsMsg;
        this.ws.onclose = function (evt) {
          dump("行情数据通道已断开")
        };
      },
      
      /**
       * ws onMessage回调
       * @param evt
       */
      wsMsg(evt) {
        
        let data = eval("(" + evt.data + ")");
        let type = data.type || '';
        
        //检验数据格式是否合法
        if (typeof type === "undefined")
          return;
        
        if (type === 'data') { //最新行情
          for (let i = 0; i < this.data.length; i++) {
            if (this.data[i].id == data.list.id) {
              this.data[i].last_trading_price = data.list.last_trading_price ? data.list.last_trading_price : '/';
              this.data[i].diff_rate = data.list.diff_rate + '%';
            }
          }
        }
        
      },
    },
    watch: {},
    mounted() {
      this.list();
    },
    beforeDestroy() {
      //关闭websocket
      this.ws.close();
    },
  }

</script>

<style scoped lang="scss">


</style>
